<template>
	<view class="content">
		<view class="hide" :hidden="userFeedbackHidden"></view>
		<view class="add-item" :hidden="userFeedbackHidden">
			<view class="add-name">
				    <view class="head">
				    	添加任务
				    </view>
					<view class="">
						任务名称：
					</view>
				<input v-model="taskname" class="uni-input" focus placeholder="输入任务名称" />
			</view>
			<view class="add-value">
				  <view class="">
				  	  任务积分：
				  </view>
				<input v-model="taskvalue" class="uni-input" focus placeholder="输入积分值" />
			</view>	
			<view class="add-type">
				<view class="">
					任务类型：
				</view>
			  <uni-data-select
				v-model="type"
				:localdata="range"
				:clear="false"
			  ></uni-data-select>
			</view>
			<view class="add-confirm" @click="submit()">确定</view>
		</view>
		<image class="bg" src="/static/2.png"></image>
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" />
			</view>	
			<div class="top">
				<div class="icon"><image class="img" src="/static/kulomi/灵动素材 (26).png"></image></div>
				<div class="title">任务列表</div>
				<div class="new"  @click="showDiv()">+</div>
			</div>
			<view class="task-list">
				<view class="item-icon" v-for="(pic,index) in range":key='index'>
					<image  class="icon" src="pic.type" mode=""></image>
				</view>
                 <view class="task-item" v-for="(item,index) in list":key='index'>
                     <view class="item-name">
                     	<view>{{item.name}}</view>
                     </view> 
					 <view class="item-value">
					 	<view>{{item.value}}积分</view>
					 </view> 
                 </view>
			</view>
	</view>
</template>

<script>
	export default {
		name: 'Task',
		data(){
			return{
				kulomi:"/static/kulomi/灵动素材 (22).png",
				baku:"/static/kulomi/灵动素材 (23).png",
				taskname:"",
				taskvalue:"",
				userFeedbackHidden:true,
				type: "",
				range: [
				  { type: "kulomi", text: "库洛米专属" },
				  { type: "baku", text: "巴库专属" },
				  { type: 2, text: "公共任务" },
				],
				list:[
				{
					name:"吃饭饭",
					value:"10",
				},
				{
					name:"睡觉觉",
					value:"10",
				},
				]
			}
		},
		methods:{
			showDiv(){
				this.userFeedbackHidden=false;
			},
			submit(){
				this.userFeedbackHidden=true;
				let newList={
					name:this.taskname,
					value:this.taskvalue,
				}
				this.list.push(newList);
			}
		},
	}
</script>

<style>
.content{
	height: 807px;
	background-color: #f2f2f2;
}
.bg{
	width: 414px;
	height: 232px;
}
.img{
	width:39px;
	height:42px;
}
.input-view {
	display: flex;
	width: 100%;
	background-color: #f8f8f8;
	height: 35px;
	padding: 0 5px;
	margin: 7px 15px;
	border-radius: 15px
}

.input-uni-icon {
	line-height: $nav-height;
}

.nav-bar-input {
	width: 90%;
	padding: 0 5px;
	font-size: 12px;
	background-color: #f8f8f8;
}
.new{
	width: 25px;
	height: 25px;
	text-align: center;
	background-color: #B2A7C4;
	color: white;
	font-size: 20px;
	border-radius: 50px;
	margin-top: 7px;
}

.top{
	display: flex;
	margin: 12px 5px;
	padding: 5px 15px;
}
.img{
	width: 40px;
	height: 40px;
}
.title{
	padding-top: 5px;
    margin-right: 10px;
	font-size: 20px;
}
.task-list{
	padding: 0 22px;
}
.task-item{
	background-color: white;
	padding: 10px 25px;
	border-bottom: 2px solid #ccc;
}
.item-value{
	width: 50%;
}
.item-name{
	margin-bottom: 5px;
	font-size: 20px;
	width: 50%;
}
.item-icon{
	float: left;
	width: 55px;
	margin-right: 30px;
}
.icon{
	width: 52px;
	height: 52px;
}
.uni-input{
	background-color: white;
	border-bottom: 1px solid #ccc;
	height: 35px;
}
.add-item{
	z-index:999;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	position: absolute;
	background-color: white;
	width: 330px;
	height: 200px;
	padding: 15px;
}
.add-name{
	margin: 5px;
}
.head{
	font-size: 20px;
	text-align: center;
	margin: 5px;
}
.add-confirm{
	margin-top: 15px;
	height: 30px;
	width: 100%;
	font-size: 17px;
	color: white;
	background-color: #B2A7C4;
	text-align: center;
}
.hide{
	position: absolute;
	transition: all .4s linear 0s;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.7;
}
</style>
